<template>
	<view class="add-quotient">
		<view class="form-content">
			<view class="form-item">
				<view class="form-label">
					网点名称
				</view>
				<view class="form-input">
					<u-input v-model="form.dotName" type="select" placeholder='' @click="checkDotName" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					选商名称
				</view>
				<view class="form-input">
					<u-input v-model="form.customerName" type="select" placeholder=''
						@click="checkQuotient" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					洽谈方式
				</view>
				<view class="form-input">
					<u-input v-model="form.contractName" type="select" placeholder=''
						@click="dotItem.status==0||!dotItem.status?contractShow=true:''" />
				</view>
			</view>

			<view class="form-item">
				<view class="form-label">
					洽谈进度
				</view>
				<view class="form-input">
					<u-input v-model="form.progressName" type="select" placeholder=''
						@click="dotItem.status==0 || !dotItem.status ?scheduleShow=true:''" />
				</view>
			</view>

			<view class="form-item" v-if="form.progress==2">
				<view class="form-label">
					店面类型
				</view>
				<view class="form-input">
					<u-input v-model="form.storeTypeName" type="select" placeholder=''
						@click="dotItem.status==0 || !dotItem.status ?storeTypeShow=true:''" />
				</view>
			</view>

			<view class="form-item" v-if="form.progress==3">
				<view class="form-label">
					预计签约时间
				</view>
				<view class="form-input">
					<u-input v-model="form.strPlanSigningTime" type="select" placeholder=''
						@click="dotItem.status==0 || !dotItem.status ?dateShow=true:''" />
				</view>
			</view>

			<view v-if="form.progress==1||form.progress==2">
				<view>
					洽谈内容
				</view>
				<view class="textarea-box">
					<u-input v-model="form.talkInfo" type="textarea" height="200" auto-height maxlength='200'
						:adjust-position='false' placeholder='' />
				</view>

			</view>

			<view v-if="form.progress==4">
				<view>
					终止原因
				</view>
				<view class="textarea-box">
					<u-input v-model="form.suspendReason" type="textarea" height="200" auto-height maxlength='200'
						:adjust-position='false' placeholder='' />
				</view>

			</view>
		</view>
		<u-popup v-model="dotShow" mode='center'>
			<view class="dotPup">
				<image src="../../static/logs/pupClose.png" mode="" class="pupClose" @click="dotShow=false"></image>
				<view class="pupTitle">
					网点名称
				</view>
				<view class="p35">
					<view class="search-box">
						<image src="../../static/logs/search-icon.png" mode=""></image>
						<u-input v-model="searchDotValue" placeholder='输入网点名称' type="text" @input='getDotList'
							:adjust-position='false' />
					</view>
				</view>

				<scroll-view class="dotList " :scroll-y="true">
					<view class="dotItem" v-for="item in dotList" :key="item.id" v-if="item.marketName">
						<view class="itemText" @click="selectDot(item)">
							{{item.marketName}} {{item.outletsCode}}
						</view>

						<view class="dotLine">

						</view>
					</view>

				</scroll-view>
			</view>
		</u-popup>

		<u-popup v-model="quotientShow" mode='center'>
			<view class="dotPup quotientPup">
				<image src="../../static/logs/pupClose.png" mode="" class="pupClose" @click="quotientShow=false">
				</image>
				<view class="pupTitle">
					选商名称
				</view>
				<view class="p35">
					<view class="search-box">
						<image src="../../static/logs/search-icon.png" mode=""></image>
						<u-input v-model="quotientValue" placeholder='输入选商名称' type="text" @input='getQuotientList'
							:adjust-position='false' />
					</view>
				</view>


				<scroll-view class="dotList quotientList" :scroll-y="true" v-if="quotientList.length">
					<view class="dotItem" v-for="item in quotientList" :key="item.id" >
						<view class="itemText" @click="selectQuotient(item)">
							{{item.customerName}}（{{item.merchantCode}}）
						</view>

						<view class="dotLine">

						</view>
					</view>
					

				</scroll-view>
				<view class="emptyText" v-else>
					该网点暂无选商客户备案,请先备案选商客户
				</view>
			</view>
		</u-popup>
		<view class="submit-wrap" v-if="dotItem.status==0 || !dotItem.status">
			<!-- <view class="btn cancel">
				关闭
			</view> -->
			<view class="btn cancel" @click="addCustomer(0)">
				保存
			</view>
			<view class="btn submit" @click="submitShow=true">
				提交
			</view>
		</view>
		<u-select v-model="scheduleShow" :list="progressList" @confirm='scheduleConfirm' label-name='dictLabel'
			value-name='dictValue'></u-select>
		<u-select v-model="contractShow" :list="contractList" @confirm='contractConfirm' label-name='dictLabel'
			value-name='dictValue'></u-select>
		<u-select v-model="storeTypeShow" :list="storeTypeList" @confirm='storeTypeConfirm' label-name='dictLabel'
			value-name='dictValue'></u-select>
		<u-calendar v-model="dateShow" mode="date" :min-date="minDate" :max-date='maxDate'
			@change='dateChange'></u-calendar>
		<u-popup v-model="submitShow" mode='center'>
			<view class="submitpup">
				<view class="content-wrap">
					提交后不可修改，是否继续提交？
				</view>
				<view class="pup-btn-wrap">
					<view class="pup-btn" @click="submitShow=false">取消</view>
					<view class="pup-btn pup-submit" @click="addCustomer(1)">确定</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		getSystemDictData,
		queryKeyXdstore,
		queryKeyOutlets,
		followup,
		editFollowup,
		followupDetail
	} from '@/common/service.js'
	export default {
		data() {
			return {
				minDate: this.getTodayDate(),
				maxDate: this.showTimeFn(),
				form: {
					dotName: '',
					talkInfo: '',
					suspendReason: '',
					strPlanSigningTime: '',
					progress: '',
					progressName: '',
					outletsCode: '',
					customerName: '',
					customerPhone: '',
					contract: '',
					contractName: '',
					storeType: '',
					storeTypeName: '',
					merchantCode: ''
				},

				submitShow: false,
				cancelShow: false,
				dateShow: false,
				scheduleShow: false,
				contractShow: false,
				storeTypeShow: false,
				progressList: [],
				contractList: [],
				storeTypeList: [],
				dotList: [],
				quotientList: [],
				dotShow: false,
				quotientShow: false,
				quotientValue: '',
				searchDotValue: '',
				dotItem: {},
				logItem:{}
			}
		},
		onLoad(options) {
			this.getDotList()
			// this.getQuotientList()
			this.id = options.id
			let logItem = uni.getStorageSync('logItem') || ''
			if(logItem.id){
				this.form.outletsCode=logItem.outletsCode
				this.form.merchantCode=logItem.merchantCode
				this.form.dotName=logItem.marketName
				this.form.customerName=logItem.customerName
				this.getQuotientList()
			}
			this.logItem = logItem
			console.log(this.logItem);
			if (this.id) {
				this.getDetail()
			} else {
				this.initDict()
			}
		},
		methods: {
			checkQuotient(){
				this.dotItem.status==0 || !this.dotItem.status ?this.quotientShow=true:this.quotientShow=false
			},
			checkDotName() {
				this.dotItem.status == 0 || !this.dotItem.status ? this.dotShow = true : this.dotShow = false
			},
			initDict() {
				this.getDictList()
				this.getContractMethod()
				this.getContractType()
			},
			getDetail() {
				console.log(this.id);

				let data = this.id
				followupDetail(data, (res) => {

					this.dotItem = res.data.data
					this.form.dotName = this.dotItem.marketName
					this.form.outletsCode = this.dotItem.outletsCode
					this.form.customerName = this.dotItem.customerName
					this.form.merchantCode = this.dotItem.merchantCode
					this.form.contract = this.dotItem.talkType
					this.form.progress = this.dotItem.talkProgress
					this.form.talkInfo = this.dotItem.talkInfo
					this.form.storeType = this.dotItem.storeType
					this.form.strPlanSigningTime = this.dotItem.planSigningTime
					this.form.suspendReason = this.dotItem.suspendReason
					this.initDict()
				}, (e) => {
					this.$refs.uToast.show({
						title: e,
						type: "error",
						duration: 3000,
					});
				})
			},
			submitDot(data) {
				data.id = this.dotItem.id
				data.logCode = this.dotItem.logCode

				editFollowup(data,
					(res) => {
						if (res.data.code == 200) {
							console.log(res);
							uni.showToast({
								icon: 'none',
								title: '修改成功'
							})
							this.refresh()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			add(data) {
				followup(data,
					(res) => {
						if (res.data.code == 200) {
							console.log(res);
							let title = data.status == 1 ? '提交成功' : '保存成功'
							uni.showToast({
								icon: 'none',
								title
							})
							this.refresh()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			refresh() {
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
					uni.$emit('getList', true)
				}, 2000)

			},
			addCustomer(status) {

				if (!this.form.outletsCode) {
					uni.showToast({
						icon: 'none',
						title: '请选择网点名称'
					})
					return
				}
				if (!this.form.merchantCode) {
					uni.showToast({
						icon: 'none',
						title: '请选择选商名称'
					})
					return
				}




				let data = {
					outletsCode: this.form.outletsCode,
					merchantCode: this.form.merchantCode,
					talkType: this.form.contract,
					talkProgress: this.form.progress,
					status
				}
				if (this.form.progress == 1) {

					data.talkInfo = this.form.talkInfo
				} else if (this.form.progress == 2) {


					data.storeType = this.form.storeType
					data.talkInfo = this.form.talkInfo
				} else if (this.form.progress == 3) {


					data.strPlanSigningTime = this.form.strPlanSigningTime
				} else if (this.form.progress == 4) {

					data.suspendReason = this.form.suspendReason
				}


				if (this.dotItem.id) {
					this.submitDot(data)
				} else {
					this.add(data)
				}

			},
			getContractType() {
				let data = 'COOPERATE_STORE_TYPE'
				getSystemDictData(data,
					(res) => {

						this.storeTypeList = res.data.data

						if (this.form.storeType) {
							this.storeTypeList.map(item => {

								if (item.dictValue == this.form.storeType) {
									console.log(item, '店面类型');
									this.form.storeTypeName = item.dictLabel
								}
							})
						}
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			getContractMethod() {
				let data = 'negotiation_method'
				getSystemDictData(data,
					(res) => {

						this.contractList = res.data.data
						if (this.form.contract) {
							this.contractList.map(item => {

								if (item.dictValue == this.form.contract) {

									this.form.contractName = item.dictLabel
								}
							})
						}
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			selectDot(item) {
				this.form.dotName = item.marketName
				this.form.outletsCode = item.outletsCode
				this.dotShow = false
				this.getQuotientList()
			},
			selectQuotient(item) {
				console.log(item);
				this.form.customerName = item.customerName
				this.form.customerPhone = item.customerPhone
				this.form.merchantCode = item.merchantCode
				this.quotientShow = false
			},
			getDotList() {
				let data = {
					keyWord: this.searchDotValue
				}

				queryKeyXdstore(data,
					(res) => {
						this.dotList = res.data.data
						console.log(res.data);
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)

			},
			getQuotientList() {
				let data = {
					keyWord: this.quotientValue,
					outletsCode: this.form.outletsCode,
				}
				queryKeyOutlets(data,
					(res) => {
						this.quotientList = res.data.data
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			getDictList() {
				let data = 'negotiation_progress'
				getSystemDictData(data,
					(res) => {

						this.progressList = res.data.data
						if (this.form.progress) {
							this.progressList.map(item => {

								if (item.dictValue == this.form.progress) {

									this.form.progressName = item.dictLabel
								}
							})
						}
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			scheduleConfirm(e) {
				console.log(e);
				this.form.progress = e[0].value
				this.form.progressName = e[0].label
			},
			contractConfirm(e) {
				console.log(e);
				this.form.contract = e[0].value
				this.form.contractName = e[0].label
			},
			storeTypeConfirm(e) {
				console.log(e);
				this.form.storeType = e[0].value
				this.form.storeTypeName = e[0].label
			},

			dateChange(e) {
				// console.log(e);
				this.form.strPlanSigningTime = e.result
			},
			getTodayDate() {
				const today = new Date();
				const year = today.getFullYear();
				const month = String(today.getMonth() + 1).padStart(2, '0');
				const day = String(today.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			showTimeFn() { //u-calendar限制无法点击当日之后的日期, 现设置点击可以设置当日之后的日期
				this.showTime = true
				let dete = new Date()
				let year = dete.getFullYear()
				let month = dete.getMonth() + 1
				let day = dete.getDate()
				let maxYear = year + 1
				let maxDate = maxYear + '-' + month + '-' + day
				return maxDate
			},

		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-drawer__scroll-view .uni-scroll-view {
		overflow: visible !important;
	}
	.emptyText{
		text-align: center;
		color: #ccc;
		margin-top: 40rpx;
	}
	/deep/.u-drawer__scroll-view .dotList .uni-scroll-view {
		overflow: hidden auto !important;
	}

	.p35 {
		padding: 0 35rpx;
	}

	.dotPup {

		width: 690rpx;
		height: 937rpx;
		padding: 35rpx 0;

		.dotList {
			margin-top: 20rpx;
			height: 660rpx;
			overflow-y: auto;

			.itemText {
				padding: 20rpx 35rpx;

			}

			.dotLine {
				width: 100%;
				height: 2rpx;
				background-color: #F2F2F2;
			}
		}

		.quotientList {
			height: 320rpx;
			overflow: hidden auto;
		}

		.search-box {
			width: 100%;
			height: 98rpx;
			background-color: #F7F7F7;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-top: 30rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}

		.pupTitle {
			text-align: center;
			font-weight: 600;
			font-size: 32rpx;
			color: #333;
		}

		.pupClose {
			width: 46rpx;
			height: 46rpx;
			position: absolute;
			right: -23rpx;
			top: -23rpx;
		}
	}

	.quotientPup {
		height: 593rpx;
	}

	.add-quotient {
		min-height: 100vh;
		background-color: #F3F5F7;
		padding-top: 10rpx;

		.form-content {
			background-color: #fff;
			padding: 30rpx;
			// padding-bottom: 200rpx;
			min-height: calc(100vh - 160rpx);
		}

		.form-item {
			display: flex;
			align-items: center;
			margin-bottom: 26rpx;
		}

		.form-label {
			color: #666;
			width: 120rpx;
			margin-right: 10rpx;
			// text-align-last: justify;
		}

		.form-input {
			flex: 1;
			height: 98rpx;
			background-color: #F7F7F7;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			padding: 0 15rpx;
		}

		.form-radio {
			flex: 1;
			padding: 0 15rpx;
		}


		.submit-wrap {
			width: 100vw;
			height: 120rpx;
			background-color: #fff;
			// padding: 0 30rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			position: fixed;
			left: 0;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			padding-bottom: constant(safe-area-inset-bottom);
			box-sizing: content-box;
			.btn {
				width: 330rpx;
				height: 90rpx;
				border-radius: 54rpx;
				background-color: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #666;
				font-weight: 600;
			}

			.submit {
				background-color: #307DCD;
				color: #fff;

			}
		}
	}

	.submitpup {
		width: 630rpx;
		height: 292rpx;
		padding-top: 70rpx;

		.content-wrap {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			text-align: center;
		}
	}

	.cancelpup {
		width: 630rpx;
		height: 606rpx;
		padding-top: 30rpx;

		.title {
			color: #333333;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;

		}

		.tip {
			width: 100%;
			padding: 30rpx;
			color: #333;
			margin-top: 50rpx;
		}
	}

	.pup-btn-wrap {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		border-top: 1px solid #F7F7F7;
		display: flex;

		.pup-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #666666;
			font-weight: 600;
			flex: 1;
			height: 100%;
		}

		.pup-submit {
			color: #307DCD;
			border-left: 1px solid #F7F7F7;
		}
	}

	.textarea-box {
		width: 100%;
		padding: 10rpx;
		background-color: #F7F7F7;
	}

	/deep/.u-mode-center-box {
		border-radius: 20rpx;
	}
</style>